<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>姜杭轩的简历</title>
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
	<script src="./iconfont.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul li{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		.icon {
		   width: 1em; height: 1em;
		   vertical-align: -0.15em;
		   fill: currentColor;
		   overflow: hidden;
		}
		body{
			overflow: hidden;
			font-family: PingFangSC-Regular, "Microsoft YaHei",sans-serif;
			background-color: #17af97;
		}
		h3{
			font-weight: 900;
			color: #fff;
			font-size: 50px;
			padding: 30px 0;
			margin-bottom: 30px;
		}
		h3 a{
			color: #eee;
			font-size: 20px;
			background-color: #37ddc4;
			border-radius: 5px;
			margin-left: 10px;
			padding: 3px;
		}
		#info{
			display: flex;
			justify-content: center;
			align-items: center;
=======
    <meta charset="UTF-8">
    <title>姜杭轩的简历</title>
    <!--<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">--> 
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_dfhrv20vcimdvx6r.css">
</head>
<style>
    body, ul, li, h1, h2, h3, h4, h5, h6, p ,a{
        padding: 0;
        margin: 0;
        font-family: "sans-serif";
        /*background-color: #FEFFFF;*/
        color: #5C6468;
    }
    html, body {
        height: 100%;
    }
    ul,li {
        list-style: none;
    }
    a {
        /*color: #5C6468;*/
        text-decoration: none;
    }
    .green{
        color: #4BCA64;
        display: inline;
    }
    .orange{
        color: #FA4E39;
        display: inline-block;
    }
    .detail-head h1{
        display: inline;
    }
    header .top {
        background: url('imgs/pic1.jpg')  no-repeat  center;
        background-size: cover;
        height: 85vh;
        display:flex;
        /*align-items:center;!*垂直居中*!*/
        justify-content: center;/*水平居中*/
        box-shadow: 0 4px 10px #ccc;

    }
    header .top-ct{
        position: relative;
        top: 12vh;
    }
    header .top-ct h1{
        font-size: 50px;
        letter-spacing: 20px;
    }
    header .top-ct h3{
        letter-spacing: 5px;
    }
    header .top-ct>ul li{
        padding-top: 16px;
        text-align: center;
    }

    .center{

        width:80vw;
        margin: 140px auto;
        text-align: center;
        /*border: 1px solid red;*/
        position: relative;
    }

    .introduce{
        position: relative;
        margin-top:30px;
        display: flex;
        /*justify-content: center;*/
    }
    .detail-head{
        text-align: left;
        border-bottom: 1px solid #4BCA64;
        /*left: -300px;*/
    }
    .pic3{
        /*float: left;*/
        text-align: left;

    }
    .myself{
        width:300px;
    }
    .pic3 img{
        width:300px;
        height: auto;
    }
    .btn{
        /*position: absolute;*/
        /*top: 112px;*/
        /*right: 10px;*/
        margin-top:100px;
        color: #FDE5DF;

    }
    .btn1{
        width:264px;
        height:52px;
        border-radius: 26px;
        /*margin: 12px 0;*/
        border: none;
        margin-left:80px;
        box-shadow: -18px 20px 20px #ccc;
    }
    .btn2{
        width:264px;
        height:52px;
        border-radius: 26px;
        /*margin: 12px 0;*/
        border: none;
        margin-left:80px;
        box-shadow: -18px 20px 20px #ccc;
    }
    .btn h3{
        color: #FDE5DF;
        font-size: initial;
    }
    .bg-green{
        background-color: #4BCA64;
    }
    .bg-orange{
        background-color: #FA4E39;
    }
>>>>>>> dafe627eb6f3948dffc384fca7bad3dc6d681c56

		}
		#info img{
			width: 100px;
			border-radius: 7%;
			border: 4px solid #FAB646;
		}
		#info{
			color: #fff;
		}
		#info a {
			color: #eee;
			margin-right: 10px;
			padding: 3px;
			border-radius: 5px;
			background-color: #37ddc4;
		}
		#info h3 {
			margin-top: 15px;
			margin-bottom: 10px;
			font-size: 30px;
			color: #fff;
			padding: 0;
		}
		#info p {
			color: rgba(71, 0, 136, 0.48);
			font-size: 25px;
			margin-bottom: 10px;
		}
		.handsome{
			text-align: center;
		}

		#vue-prj{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		#vue-prj img{
			width: 100%;
			height: auto;
			max-width: 100%;
			display: block;
		}
		#vue-prj .ct1{
			display: flex;
			justify-content: center;
		}
		#vue-prj h3{
			text-align: center;
		}
		#vue-prj .pic{
			width:48%;
			margin-right: 24px;
		}
		#vue-prj ul.describe h4{
			/*float: left;*/
			font-size: 25px;
			color: #eee;
			margin-bottom: 15px;
		}
		#vue-prj ul.describe p{
			width: 450px;
			line-height: 25px;
			/*float: left;*/
			font-size: 20px;
			color: rgb(243,235,235);
		}

		#project>div>ul>li{
			display: inline-block;
			width: 40vw;
			text-align: left;
			margin-bottom: 40px;
			height: 130px;
			padding-left: 10px;
		}
		#project>div>ul>li p{
			font-size: 16px;
			color: rgb(158,218,207);
			padding: 3px 0;
		}
		#project>div>ul>li>a{
			color: #fff;
			font-size: 50px;
			border-radius: 50%;
			background-color: rgba(100,100,100,0.5);
			padding: 15px;
			display: block;
			float: left;
			width: 50px;
			height: 50px;
			margin: 16px 34px;
			line-height: 50px;
		}
		#project h3{
			text-align: center;
		}

		#skills>div>ul>li>p.lan{
			float: left;
			line-height: 50px;
			color: #fff;
			font-size: 30px;
			width: 200px;
			text-align: left;
		}
		/*.main>#skills>div>ul>li>p.percent{
		line-height: 50px;
		color: #fff;
		font-size: 30px;
		}*/
		.main>#skills>div>ul>li:after{
			content: '';
			display: block;
			clear: both;
		}
		.main>#skills>div>ul>li{
			width: 1100px;
			margin: 0 auto;
			margin-bottom: 20px;
		}

		.pannel-ct{
			height: 50px;
			width: 800px;
			background-color: rgb(240, 236, 236);
			margin: 0 auto;
			float: left;
		}
		.pannel{
			width: 600px;
			height: 50px;
			background-color: #333;
		}
		.html .pannel{
			width: 680px;
		}
		.css .pannel{
			width: 640px;
		}
		.js .pannel{
			width: 590px;
		}
		.jq .pannel{
			width: 620px;
		}
		.Webpack .pannel{
			width: 400px;
		}
		.Vue .pannel{
			width: 350px;
		}
		.React .pannel{
			width: 220px;
		}
		.resume ul{
			width: 300px;
			/*border: 1px solid #333;*/
			margin: 0 auto;
			margin-bottom: 50px;
		}
		.resume ul>li{
			display: inline-block;
			background-color: #37ddc4;
			padding: 5px;
			margin-bottom: 5px;
			border-radius: 5px;
			cursor: pointer;
			color: #fff;
		}
		.resume ol>li{
			text-align: left;
			width: 800px;
			margin: 0 auto;
			color: #fff;
			font-size: 20px;
			margin-bottom: 10px;
		}
		.main>#project>div>ul>li h4>a{
			font-size: 30px;
			color: rgba(100,100,100,0.5);
		}
		.main>#project>div>ul>li>h4{
			margin-top: 5px;
			margin-bottom: 9px;
		}
		.main>ul{
			position: fixed;
			right: 50px;
		}
		.main>ul li{
			padding: 10px 0;
		}
		.main>ul li>a{
			color: #333;
			border: 1px solid #eee;
			border-radius: 50%;
			width: 8px;
			height: 8px;
			display: block;
		}
		.selected{
			background-color: #333;
		}
	</style>
</head>
<body>
	<div class="main">
		<div id="info">
			<div class="handsome">
				<img src="http://i1.piimg.com/567571/6d33380ea21579f1.jpg">
				<h3>姜杭轩</h3>
				<h2>前端工程师</h2>
				<!-- <p>期望薪资：10k</p> -->
				<p>jianghangxuan@foxmail.com</p>
				<p>Wechart/Phone:18817818001</p>
				<a href="https://github.com/JaeJiang" target="_blank">Github</a>
				<a href="http://www.jianshu.com/u/3ecbe81ebc23" target="_blank">博客</a>
				<a href="https://mail.qq.com/cgi-bin/ftnDownload302?sid=o4Muxoyc24k6a1wE&fid=2%2Fe013e8b2-91fb-4a5d-a57c-732dcc3f75a9&code=d927f6e9&k=37393237494e9fc6447360004036571601090304030e070b49000351041b5158515d1f5653010614530a00530555565f530c530e66286584ce838ee79f1bb69fa281f587d0fdda93d39b1f055607521756174253003658" target="_blank">简历PDF</a>
			</div>
		</div>
		<!--todos应用-->
		<div id="vue-prj">
			<div style="padding-right:50px;">
				<h3>基于 Vue 的音乐播放器<a href="http://jianghangxuan.coding.me/resume/music-vue/page" target="_blank">预览</a><a href="https://github.com/JaeJiang/resume/tree/master/music-vue" target="_blank">源码</a></h3>
				<div class="ct1">
					<div class="pic">
						<img src="http://p1.bqimg.com/567571/4e2f52b19b19ae9f.png">
					</div>
					<div>
						<ul class="describe">
							<li>
								<h4>使用技术： </h4>
								<p>Vue、 Webpack、 JavaScript、 AJAX、 HTML5</p>
							</li>
							<li>
								<h4>项目描述：</h4>
								<p>可以进行歌曲的暂停与播放，对歌曲的播放进度进行调节，并对歌词进行同步。播放上一首或者下一首时，获取的都是随机歌曲。可以进行音量的控制，满足一个基本的音乐播放器的功能。</p>
							</li>
							<li>
								<h4>实现细节： </h4>
								<p>先用Webpack搭建环境,通过 HTML5 的 audio 标签，可以将音频嵌入到 HTML 中，并通过该标签提供的一些属性和方法，可以实现开始、暂停以及对音量进行调节等功能。歌词同步可以根据当前播放的进度与歌词的时间戳来实现。将歌词放入数组中，通过 vue 的 v-for 将数组中的内容渲染到页面上，需要改变页面上的歌词时，只需要将数组的内容改变即可。</p>
							</li>
						</ul>
					</div>
				</div>

			</div>
		</div>
		<!--vue音乐-->
		<div id="vue-prj">
			<div>
				<h3>基于 Vue 的在线日程表<a href="https://jaejiang.github.io/vue-project/step-3/page" target="_blank">预览</a><a href="https://github.com/JaeJiang/vue-project/tree/master/step-3" target="_blank">源码</a></h3>
				<div class="ct1">
					<div class="pic">
						<img src="http://i1.piimg.com/567571/9446de046b81d410.png">
					</div>
					<div>
						<ul class="describe">
						<li>
							<h4>使用技术： </h4>
							<p>Vue、 Webpack、 JavaScript、 LeanCloud（准备以这个再加个登录功能,储存数据）</p>
						</li>
						<li>
							<h4>项目描述：</h4>
							<p>1.用户可以新建一个待办事项<p>2.用户可以删除一个待办事项<p>3.用户可以将一个待办事项标记为已完成<p>4.用户刷新页面之后，待办事项还在</p>
						</li>
						<li>
							<h4>实现细节： </h4>
							<p>首先搭建Webpack环境，利用Vue的特性把DOM和JS变量（data	）双向绑定起来，监听键盘时间回车以后新建一个对象，使用v-if,v-else给数据加上复选框和删除按钮，然后把数据存在localStorage中</p>
						</li>
					</ul>
					</div>
				</div>
			</div>
		</div>
		<div id="project">
			<div >
				<h3>项目经验</h3>
				<ul class="items">
					<li>
						<a href="https://jaejiang.github.io/resume/%E4%BB%8A%E6%97%A5%E5%A4%B4%E6%9D%A1%E4%BB%BF%E7%AB%99/"  target="_blank">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-3"></use>
							</svg>
						</a>
						<div class="detail">
						<h4><a href="https://jaejiang.github.io/resume/%E4%BB%8A%E6%97%A5%E5%A4%B4%E6%9D%A1/"  target="_blank">今日头条首页</a></h4>
						<p>使用技术: jQuery、 JavaScript</p>
						<p>用flex属性重新构造布局,得到更好的用户体验.</p>
						</div>
					</li>

					<!--正在进行中...........-->
					<!--<li>-->
						<!--<a href="" target="_blank">-->
							<!--<svg class="icon" aria-hidden="true">-->
							  <!--<use xlink:href="#icon-3"></use>-->
							<!--</svg>-->
						<!--</a>-->
						<!--<h4><a href="" target="_blank">饿了吗手机端页面</a></h4>-->
						<!--<p>使用技术: jQuery、 JavaScript</p>-->
						<!--<p></p>-->
					<!--</li>-->
					<li>
						<a href="https://jaejiang.github.io/resume/%E8%BD%AE%E6%92%AD/fullpage">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-3"></use>
							</svg>
						</a>
						<div class="detail">
						<h4><a  href="https://jaejiang.github.io/resume/slide/fullpage" target="_blank">轮播图</a></h4>
						<p>使用技术： HTML5、CSS、 jQuery</p>
						<p>实现全屏无限轮播功能。</p>
						</div>
					</li>
					<li>
						<a href="https://jaejiang.github.io/resume/waterfall-page/waterfall" target="_blank">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-3"></use>
							</svg>
						</a>
						<div class="detail">
						<h4><a href="https://jaejiang.github.io/resume/waterfall-page/waterfall" target="_blank">新浪新闻简页</a></h4>
						<p>使用技术: jQuery、 AJAX、 HTML5</p>
						<p>通过AJAX拿到新闻数据,再通过瀑布流的方式展现出来</p>
						</div>
					</li>
					
					<li>
						<a href="https://jaejiang.github.io/resume/css3/3d-carousel">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-3"></use>
							</svg>
						</a>
						<div class="detail">
						<h4><a  href="https://jaejiang.github.io/resume/css3/3d-carousel" target="_blank">3D旋转木马效果</a></h4>
						<p>使用技术：CSS3 </p>
						<p>主要使用了CSS3中的变换transform和动画animation属性CSS3 给每一个item设置好位置，rotateY让每一个item绕着Y轴偏移，设置不同索引div的偏移角度.</p>
						</div>
					</li>
					<li>
						<a href="hhttps://jaejiang.github.io/resume/datepicker/datepicker">
							<svg class="icon" aria-hidden="true">
							  <use xlink:href="#icon-3"></use>
							</svg>
						</a>
						<div class="detail">
						<h4><a  href="https://jaejiang.github.io/resume/datepicker/datepicker" target="_blank">日历插件</a></h4>
						<p>使用技术： HTML5、CSS、jQuery</p>
						<p>实现点击弹出日历界面，选择天数。</p>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div id="skills">
			<div>
				<h3 style="text-align: center">擅长技术</h3>
				<ul>
					<li class="html">
						<p class="lan">HTML</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
					<li class="css">
						<p class="lan">CSS</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
					<li class="js">
						<p class="lan">Javascript</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
					<li class="jq">
						<p class="lan">jQuery</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
					<li class="Webpack">
						<p class="lan">Webpack</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
					<li class="Vue">
						<p class="lan">Vue</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
					<li class="React">
						<p class="lan">React</p>
						<div class="pannel-ct">
							<div class="pannel"></div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="resume">
			<div>
				<ul>
					<li>HTML/HTML5</li>
					<li>CSS/CSS3</li>
					<li>Vue</li>
					<li>Ajax</li>
					<li>Requirejs</li>
					<li>JSONP/CORS</li>
					<li>jQuery</li>
					<li>webpack</li>
					<li>Git</li>
					<li>Linux</li>
				</ul>
				<ol>
					<li>熟练使用 HTML、CSS、JS、jQuery 等主流技术进行开发。</li>
					<li>熟练使用 jQuery等主流库，了解一些主流框架如 Vue。</li>
					<li>理解关于跨域的内容，如 JSONP、 CORS。</li>
					<li>了解常见的布局，知道盒模型，浮动定位以及 BFC 等特性。</li>
					<li>了解 Vue 的使用，可以通过 webpack 进行简单的配置工作来开始Vue项的开发。</li>
					<li>了解 Linux 命令行，可以通过 git 进行简单的提交工作。</li>
					<li>了解 HTML5、 CSS3，有实现简单效果的经验。</li>
					<li>乐于通过各个渠道了解行业新技术，阅读各类中英文文档</li>
				</ol>
			</div>
		</div>


		<ul class="mark">
			<li><a href="javascript:void(0)" class="selected"></a></li>
			<li><a href="javascript:void(0)"></a></li>
			<li><a href="javascript:void(0)"></a></li>
			<li><a href="javascript:void(0)"></a></li>
			<li><a href="javascript:void(0)"></a></li>
			<li><a href="javascript:void(0)"></a></li>
		</ul>

	</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
	<script type="text/javascript">
		var fullPage = (function(){
			var curIndex = 0,
				isWheeling = false;

			var winH = $(window).height();

			setSize();
			function setSize(){
				$('.main>div').height(winH);
				$('.mark').css({
					'top': winH / 2 - $('.mark').height() / 2
				});
			}



			function setSelected(){
				$('.selected').removeClass('selected')
				$('.mark li').eq(curIndex).children().addClass('selected');
				$('body').animate({
					'scrollTop': winH * curIndex
				},500,function(){
					setTimeout(function(){
						isWheeling = false;
					},1000);
				});
			}

			function bindEvent(){
				$(window).on('wheel',function(e){
					if(isWheeling){
						e.preventDefault();
						return ;
					}

					var wheelDir = (e.originalEvent.deltaY > 0) ? "down" : "up";
					if((wheelDir === 'down' && curIndex === 6) || (wheelDir === 'up' && curIndex === 0)){
						return ;
					}
					isWheeling = true;
					curIndex = (wheelDir === 'down') ? (curIndex + 1) : (curIndex - 1);
					setSelected();

				});
				$('.mark').on('click','a',function(e){
					curIndex = $(this).parent().index();
					setSelected();
				});
				$(window).on('resize',function(){
					winH = $(window).height();
					setSize();
				});
			}
			return {
				bindEvent: bindEvent
			};

		})();

		fullPage.bindEvent();
	</script>
</body>
</html>
